/*
 * @Date: 2022-05-17 20:51:48
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-18 10:01:30
 * @FilePath: \react-lvyou\src\views\placeOrder\index.tsx
 * @Description: something
 */
import { Col, Row } from "antd";
import React, { memo } from "react";
import { useDispatch } from "react-redux";
import { CheckOutCard } from "@/components/checkOutCard";
import { PaymentForm } from "@/components/paymentForm";
import { PlaceOrderContainer } from "./style";
import { useSelector } from "@/store/hooks";
import { fetchPlaceOrder } from "@/store/placeOrder";
const PlaceOrder = memo(() => {
  const dispatch = useDispatch();
  const { loading, currentOrder } = useSelector((state) => ({
    loading: state.PlaceOrder.loading,
    currentOrder: state.PlaceOrder.currentOrder,
  }));
  return (
    <PlaceOrderContainer>
      <Row>
        <Col span={12}>
          <PaymentForm />
        </Col>
        <Col span={12}>
          <CheckOutCard
            loading={loading}
            order={currentOrder}
            onCheckout={() => {
              dispatch<any>(fetchPlaceOrder(currentOrder.id));
            }}
          ></CheckOutCard>
        </Col>
      </Row>
    </PlaceOrderContainer>
  );
});

export default PlaceOrder;
